<template>
    <div class="home">
        <h2>首页</h2>
        <div>
            <input v-model="searchMsg" type="text" placeholder="请输入搜索内容">
            <button @click="searchBtn">搜索</button>
        </div>
        <div>
            <h6>历史记录</h6>
            <button @click="clearHistory">清空</button>
            <span @click="historySearch(item)" v-for="(item,index) in historyList" :key="index">
                {{ item }}
            </span>
        </div>
        <ul>
            <li @click="onLiClick(item.id)" v-for="(item,index) in list" :key="index">
                <div>
                    <p>标题: {{item.title}}</p>
                    <p>图片:<img :src="item.img_url" alt=""></p>
                    <p>价格:{{item.market_price}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from "axios"

export default {
    name: 'Home',
    data(){
        return{
            searchMsg: "",
            list:[],
            historyList: []
        }
    },
    created() {

        let historyList = window.localStorage.getItem("history");
        console.log("history===>",JSON.parse(historyList));
        this.historyList = JSON.parse(historyList) || [];

        axios.get("http://www.liulongbin.top:3005/api/getgoods?pageindex=1").then((res)=>{
            this.list = res.data.message;
            console.log(this.list);
        })
    },
    methods:{
        onLiClick(id){
            console.log("点击事件生效",id);
            this.$router.push({
                path: "/page",
                query: {
                    a: 123,
                    id: id
                }
            })
        },
        searchBtn(){
            console.log(this.searchMsg);
            if(!this.historyList.includes(this.searchMsg)){
                this.historyList.push(this.searchMsg);
            }
            window.localStorage.setItem("history",JSON.stringify(this.historyList))
            this.searchMsg = "";
        },
        historySearch(searchStr){
            this.searchMsg = searchStr;
        },
        clearHistory(){
            this.historyList = [];
            window.localStorage.clear();
        }
    }
}
</script>
<style>
    li{
        margin-bottom: 20px;
        border: 1px solid #1dd8bf;
    }
    span{
        border-radius: 4px;
        margin-left: 20px;
        border: 1px solid #17bcee;
    }
</style>